<template>
	<view class="content">
		<u-navbar :is-back="true" back-icon-color="#fff" :immersive="true"  title="会员中心"  :border-bottom="false" :title-color="titleColor" :background="background">
		</u-navbar>
		<view class="user-box">
			<view class="user-tx">
				<image src="" mode=""></image>
			</view>
			<view class="user-r">
				<view class="user-name">
					卢明燕
				</view>
				<view class="user-phone">
					购买会员享折扣
				</view>
			</view>
		</view>
		<view class="user-yue">
			<view>
				账户余额：9876.98
			</view>
			<button class="u-reset-button" >购买记录</button>
		</view>
		<view class="vip-list">
			<view class="vip-li" :class="active == index?'active':''"
			 v-for="(item,index) in vipList" :key="index"
			 @click="vipOrder(index,item.price)"
			 >
				<view class="name">{{ item.title }}</view>
				<view class="price">
					<text>￥</text>
					<view>{{ item.price }}</view>
				</view>
				<view class="des">
					{{ item.des }}
				</view>
			</view>
		</view>
		<view class="tip">
			<view class="tip-title">温馨提示</view>
			<view class="tip-content">
				<view>1、仅限本人使用，不得以任何形式转卖。</view>
				<view>2、一经购买，不支持退卡服务。</view>
				<view>3、储值对应的金额，可获得会员权限，享受折扣服务。</view>
			</view>
		</view>
		<view class="buy-vip">
			<button class="u-reset-button" @click="payVip">
				¥{{price}}立即开通
			</button>
			<view class="buy-xieyi">
				<u-checkbox v-model="checked" shape="circle"
				active-color="#FBAA27"
				>
				</u-checkbox>
				<view class="text-area">
					已阅读并同意<text>《鞋橙洗鞋柜用户协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{'background':'rgba(0,0,0,0)'},
				titleColor:'#fff',
				checked:false,
				active:0,
				price:0.00,
				vipList:[
					{
						title:'8折黄金卡',
						price:'88',
						des:'洗鞋8.8折下单'
					},
					{
						title:'8折黄金卡',
						price:'88',
						des:'洗鞋8.8折下单'
					},
					{
						title:'8折黄金卡',
						price:'88',
						des:'洗鞋8.8折下单'
					},
					{
						title:'8折黄金卡',
						price:'88',
						des:'洗鞋8.8折下单'
					}
				]
			}
		},
		onLoad() {
			this.price = this.vipList[0].price
		},
		methods: {
			vipOrder(index,price){
				this.active = index
				this.price = price
			},
			payVip(){
				if(!this.checked){
					uni.showToast({
						icon:'none',
						title:'请先已阅读并同意用户协议'
					})
					return false
				}
			}
		}
	}
</script>

<style lang="less">
.user-box{
	height: 350rpx;
	background: url(http://shoe-orange.laiwang.work/img/vip-bg.jpg) no-repeat;
	background-size: 100% 100%;
	display: flex;
	padding-top: calc(129rpx + var(--status-bar-height));
	padding-left: 60rpx;
	.user-tx{
		width: 106rpx;
		height: 106rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-left: 36rpx;
	}
	.user-r{
		margin-top: 17rpx;
		.user-name{
			font-size: 36rpx;
			color: #FFFFFF;
			margin-bottom: 18rpx;
			font-weight: bold;
		}
		.user-phone{
			font-size: 24rpx;
			color: #FFFFFF;
			font-weight: 500;
		}
	}
}
// 钱包
.user-yue{
	margin: 0 20rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	margin-top: -30rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;
	view{
		font-size: 28rpx;
		font-weight: bold;
	}
	button{
		margin: 0 ;
		width: 130rpx;
		height: 40rpx;
		// background: #FDDEA0;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #7C7C7C;
		font-size: 22rpx;
		background: rgba(253, 222, 160, 0.16)
	}
}
// vip订单列表
.vip-list{
	padding: 0 80rpx;
	margin-top: 40rpx;
	display: flex;
	flex-wrap: wrap;
	.vip-li{
		width: 260rpx;
		height: 200rpx;
		background: #FDF8EE;
		border: 1px solid #F5D59B;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-bottom: 40rpx;
		border-radius: 10rpx;
		&:nth-child(2n){
			margin-left: 70rpx;
		}
		view{
			color: #512C19;
		}
		.name{
			font-size: 24rpx;
			margin-bottom: 20rpx;
		}
		.price{
			display: flex;
			align-items: flex-end;
			justify-content: center;
			font-size: 48rpx;
			color: #50320E;
			font-weight: bold;
			margin-bottom: 19rpx;
			line-height: 1;
			text{
				font-size: 24rpx;
				margin-bottom: 6rpx;
			}
		}
		.des{
			font-size: 24rpx;
			color: #50320E;
			opacity: 0.5;
		}
	}
	.active{
		background: url(http://shoe-orange.laiwang.work/img/vip-active.png);
		background-size: 100% 100%;
	}
}
// 温馨提示
.tip{
	margin: 0 57rpx;
	margin-bottom: 99rpx;
	.tip-title{
		font-size: 24rpx;
		color: #FBAA27;
	}
	.tip-content{
		margin-top: 20rpx;
		line-height: 1.5;
		font-size: 24rpx;
	}
}
.buy-vip{
	button{
		width: 650rpx;
		height: 80rpx;
		color: #FFFFFF;
		background: #FBAA27;
		border-radius: 40rpx;
		font-size: 30rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		margin-bottom: 30rpx;
	}
	.buy-xieyi{
		width: 650rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #7C7C7C;
		.text-area{
			margin-left: -22rpx;
		}
		text{
			color: #FBAA27;
		}
	}
	
	
}
</style>
